<template>
  <div class="login-cloumn">
    <title-header :title="title"></title-header>
    <div class="card-block">
      <img slot="header" src="../../../static/img/favicon.png" class="about-icon">
      <div class="login-input">
        <div class="input-block">
          <x-input autocomplete="off" placeholder="请输入手机号" is-type="china-mobile" ref="input01" required v-model="mobileNum">
            <span slot="label" class="iconfont icon-shouji01 icon-login"></span>
          </x-input>
          <x-input autocomplete="off" placeholder="请输入密码" type="password" ref="input02" required v-model="passwords">
            <span slot="label" class="iconfont icon-dengluyemianmima icon-login"></span>
          </x-input>
        </div>
        <div class="btn-block">
          <x-button type="warn" @click.native="logins">立即登录</x-button>
          <router-link :to="{name:'register', query:{title:'立即注册'}}">
            <x-button plain class="btn-color">立即注册</x-button>
          </router-link>
        </div>
        <router-link :to="{name:'register', query:{title:'忘记密码'}}">
          <p class="b-t-text">忘记密码</p>
        </router-link>
      </div>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showCheckLogin" class="dialog-demo">
        <div style="padding: 15px;color: #333;">
          请填写正确格式信息
        </div>
        <div @click="showCheckLogin=false" class="closeDialog">
          <span>关闭</span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
import {
  Card,
  XInput,
  XButton,
  Group,
  XDialog,
  TransferDomDirective as TransferDom
} from 'vux'
import TitleHeader from '@/components/titleHeader.vue'

export default {
  directives: {
    TransferDom
  },
  components: {
    Card,
    XInput,
    XButton,
    Group,
    TitleHeader,
    XDialog
  },
  data () {
    return {
      passwords: '',
      mobileNum: '',
      title: '登录',
      valid1: false,
      valid2: false,
      showCheckLogin: false
    }
  },
  methods: {
    logins () {
      this.valid1 = this.$refs.input01.valid
      this.valid2 = this.$refs.input02.valid
      if (
        this.$refs.input01.valid === false ||
        this.$refs.input02.valid === false ||
        (this.passwords === '' || this.mobileNum === '')
      ) {
        this.showCheckLogin = true
      } else {
        this.$router.push({
          name: 'my'
        })
      }
    }
  }
}
</script>
<style scoped>
.about-icon {
  width: 66px;
  display: block;
  margin: auto;
}
.card-block {
  padding-top: 10px;
}
.login-input {
  width: 85%;
  margin: auto;
  font-size: 1rem;
}
.icon-login {
  padding-right: 15px;
  padding-bottom: 10px;
  color: #cacaca;
}
.login-input span {
  font-size: 1.5rem;
}
.input-block {
  font-size: 1rem !important;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.input-block div {
  padding: 6px 14px;
}
.b-t-text {
  color: #9a9696;
  font-size: 0.8rem;
  text-align: right;
  margin-top: 10px;
}
.btn-color {
  border-color: #e64340;
  color: #e64340;
}
.btn-block button {
  font-size: 1rem;
  margin-top: 10px;
}
.closeDialog {
  margin-bottom: 10px;
  color: #9e9e9e;
}
</style>
